<template>
  <div id="goods">
    <div class="order-receive-box withManage">
      <div class="order-receive-cont-outer">
        <ul class="order-receive-cont">
          <li class="order-receive-item" v-for="(value,index) in products" :key="index">
            <div class="goods-image demo-image__lazy">
              <img style="width:100%;height:100%" :src="value.imgs.split(',')[0]" alt />
              <!-- <img :src="value.pic" lazy></img> -->
            </div>
            <div class="goods-article">
              <h3 class="goods-name">{{value.productName}}</h3>
              <div class="goods-price">
                <span>￥{{value.shopPrice}}</span>
              </div>
            </div>
            <div class="operate">
              <el-link type="primary" @click="showProduct(value)">查看</el-link>
              <el-link type="primary" @click="delProduct(value.id)">删除</el-link>
            </div>
          </li>
          <!-- 添加商品 -->
          <li class="order-receive-item">
            <div class="addNewBox-icon" @click="addProduct()">
              <i class="el-icon-plus"></i>
            </div>
            <div class="addNewBox-text">添加新商品</div>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog :title="tittle" :visible.sync="dialogFormVisible" class="tl"  :lockScroll="false" :show-close="!show" >
      <el-form :model="product">
        <el-form-item label="商品名称" label-width="70px">
          <el-input v-model="product.productName" autocomplete="off" :disabled="!show" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="商品种类" label-width="70px">
         <el-input v-model="product.categories" autocomplete="off" :disabled="!show" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" label-width="70px">
          <el-input v-model="product.shopPrice" autocomplete="off" :disabled="!show" style="width: 180px;"></el-input>
        </el-form-item>
        <el-form-item label="关键词" label-width="70px">
          <el-input v-model="product.keyword" autocomplete="off" :disabled="!show" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="70px">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" :disabled="!show" v-model="product.description"></el-input>
        </el-form-item>
        <el-upload
          :disabled="!show"
          :on-success="success"
          :file-list="fileList"
          list-type="picture-card"
          action="http://weim1.f3322.net:8088/api/file/upload"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
   
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="true" >
        <el-button @click="dialogFormVisible = false,show = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate()">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tittle:null,
      show:false,
      products: [
      ],
      dialogFormVisible: false,
      product: {
        price: "",
        key: "",
        description: "",
        imgs:"",
        categories:""
      },
      fileList:[],
      formLabelWidth: "120px"
    };
  },
  mounted(){
    this.reload()
  },
  methods:{
    reload(){
      this.axios.post("/product/mine",{
        page:1,
        size:100
      }).then((resp)=>{
        this.products = resp.data.records
      })
    },
    showProduct(val){
      this.tittle ="查看商品"
      this.dialogFormVisible = true
      this.product = val
      var imgs = val.imgs.split(',')
      this.fileList = []
      for(let i =0;i<imgs.length;i++){
          this.fileList[i] = {}
          this.fileList[i].name =i,
          this.fileList[i].url = imgs[i]
      }
    },
    saveOrUpdate(){
      if(!(/(^[1-9]\d*$)/.test(this.product.shopPrice))){
          this.$message.error("价格应为正整数");
          return
      }
      this.axios.post("product",this.product).then((resp)=>{
        if(resp.code==0){
          this.$message.success(resp.msg)
          this.show = false
          this.reload()
          this.dialogFormVisible = false
        }else{
          this.$message.error(resp.msg)
        }
      })
    },
    success(response){
      if(!this.product.imgs){
          this.product.imgs = this.fileUrl + response.data[0]
      }else{
        this.product.imgs = this.product.imgs +","+ this.fileUrl+response.data[0]
      }
    },
    addProduct(){
      this.tittle ="新增商品"
      this.show = true
      this.dialogFormVisible = true
      this.product ={}
      this.fileList =[]
    },
    delProduct(val){
      this.$confirm('确认删除该商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        lockScroll:false,
        type: 'warning'
      }).then(() => {
          this.axios.del('/product',{
            id:val
          }).then((resp)=>{
            if(resp.code==0){
              this.$message.success(resp.msg)
              this.reload()
              this.dialogFormVisible=false
            }else{
              this.$message.error(resp.msg)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        });          
      });
    }
  }
};
</script>

<style scoped>
#goods {
  min-height: 515px;
  margin-top: 36px;
  /* padding-left: 85px; */
  /* background-color: bisque; */
}

.order-receive-box {
  overflow: hidden;
}
.order-receive-cont-outer {
  overflow: hidden;
  height: 150px;
}
.order-receive-box.withManage .order-receive-cont-outer {
  height: auto;
}
.order-receive-cont {
  overflow: hidden;
  margin-left: -24px;
  margin-top: -24px;
}
.order-receive-item {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 231px;
  height: 325px;
  /* padding: 20px 20px 20px 20px; */
  border: 1px solid #ddd;
  margin-left: 24px;
  margin-top: 24px;
  cursor: pointer;
  overflow: hidden;
}
.order-receive-item:hover {
  border: 1px dashed #0076a4;
}
.order-receive-item:hover .operate {
  display: block;
}
.order-receive-box.withManage .addNewBox-icon {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 125px auto 0;
}

.order-receive-box.withManage .addNewBox-text {
  text-align: center;
  margin-top: 12px;
  color: #888;
}

.el-icon-plus:before {
  font-size: 40px;
  color: #888;
}
.order-receive-item:hover .addNewBox-text,
.order-receive-item:hover .el-icon-plus:before {
  color: #0076a4;
}

/* 商品 */
.goods-image {
  position: relative;
  width: 231px;
  height: 231px;
}
.goods-image img {
  width: 100%;
}

/* 信息 */
.goods-article {
  overflow: hidden;
  font-size: 12px;
}
.goods-article .goods-name {
  overflow: hidden;
  height: 36px;
  font-size: 13px;
  line-height: 18px;
}
.goods-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods-article .goods-price {
  font-size: 18px;
  color: #29a3d6;
  position: relative;
  margin-top: 13px;
  height: 18px;
  line-height: 18px;
  text-align: left;
}

/* 操作 */
.operate {
  display: none;
  margin-top: 5px;
  text-align: right;
}
.cn {
  cursor: auto;
}
.operate el-link {
  cursor: pointer;
  color: #29a3d6;
}
.operate el-link:hover {
  text-decoration: underline #29a3d6;
}
</style>
